<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-loading="dialogInfo.btLoading"
    :bt-list="dialogInfo.btList"
    class="dialog-asset-card-split"
  >
    <page-form
      class="paddingBox order-model-formBox flex_wrap_start_start"
      v-model:ref-obj="formInfo.ref"
      :data="formInfo.data"
      :field-list="formInfo.fieldList"
      :rules="formInfo.rules"
      :list-type-info="listTypeInfo"
      :label-width="formInfo.labelWidth"
    >
      <template v-slot:form-manageDeptName>
        <el-input
          v-model="formInfo.data.manageDeptName"
          type="input"
          :disabled="true"
          :class="'not-mongolia'"
          placeholder="请选择管理部门"
        >
          <template #append>
            <el-icon @click="openManageDeptWindow"><MoreFilled /></el-icon>
          </template>
        </el-input>
      </template>
    </page-form>
    <p>注意：选择资产会统一刷新修改信息。</p>
  </page-dialog>
  <select-dept
    v-if="selectCommonDeptInfo.visible"
    v-model:show-dialog="selectCommonDeptInfo.visible"
    :query="selectCommonDeptInfo.query"
    :check-box="false"
    :saveEmpty="true"
    :highlight-row="true"
    @callback="selectCommonDeptCallback"
  />
</template>

<script setup name="assetCardSUpdate">
const { proxy } = getCurrentInstance();
import { assetCardBatchUpdateAttribute, getUnitAll } from "@/api/core.js";

const emits = defineEmits();
const props = defineProps({
  showDialog: {
    type: Boolean,
  },
  assetIds: {
    type: Array,
  },
});
const selectCommonDeptInfo = ref({
  visible: false,
  query: {
    deptAuth: "id",
  },
});
const listTypeInfo = ref({
  unitList: [],
})
const formInfo = ref({
  data: {},
  ref: "",
  fieldList: [
    {
      label: "资产名称",
      value: "assetName",
      clearable: true,
      type: "input",
    },
    {
      label: "规格",
      value: "standard",
      clearable: true,
      type: "input",
    },
    {
      label: "厂家名称",
      value: "brandName",
      clearable: true,
      type: "input",
    },
    {
      label: '增加方式',
      value: 'increaseType',
      type: 'select-model',
      clearable: true,
      code: 'increase_type',
      required: true,
    },
    {
      label: '计量单位',
      value: 'unitId',
      type: 'select',
      clearable: true,
      list: 'unitList',
      filterable: true,
    },
    {
      label: "管理部门",
      value: "manageDeptName",
      type: "slot",
      required: true,
    },
  ],
  rules: {
    // assetName: [{ required: true, message: "请输入资产名称", trigger: "blur" }],
    // standard: [{ required: true, message: "请输入规格", trigger: "blur" }],
    // brandName: [{ required: true, message: "请输入厂家名称", trigger: "blur" }],
    // manageDeptName: [{ required: true, message: "请选择管理部门", trigger: "change" }],
  },
  labelWidth: "120px",
});

let shows = computed({
  get() {
    return props.showDialog;
  },
  set(newValue) {
    emits("update:showDialog", newValue); // 更新父组件shows
  },
});

// 弹窗相关
const dialogInfo = ref({
  title: `批量修改`,
  btLoading: false,
  width: "40%",
  btList: [
    {
      label: "关闭",
      event: handleClose,
      show: true,
    },
    {
      label: "保存",
      type: "primary",
      event: submitForm,
      show: true,
    },
  ],
});

//获取计量单位列表
function getUnitList() {
  getUnitAll().then((resp) => {
    if (resp && resp.success && resp.data && resp.data.length > 0) {
      listTypeInfo.value.unitList = resp.data.map(function (item) {
        return { key: item.name, value: item.id }
      })
    }
  })
}
function openManageDeptWindow() {
  selectCommonDeptInfo.value.visible = true;
}
function selectCommonDeptCallback(row) {
  if (row) {
    formInfo.value.data.manageDeptId = row.id;
    formInfo.value.data.manageDeptName = row.name;
  } else {
    formInfo.value.data.manageDeptId = "";
    formInfo.value.data.manageDeptName = "";
  }
}
function submitForm() {
  formInfo.value.ref.validate((valid) => {
    if (
      !formInfo.value.data.assetName &&
      !formInfo.value.data.standard &&
      !formInfo.value.data.brandName &&
      !formInfo.value.data.manageDeptId
    ) {
      proxy.$message.warning({
        message: "请至少输入一项",
      });
      return false;
    }
    if (valid) {
      const params = {
        assetIds: props.assetIds,
        ...formInfo.value.data,
      };
      assetCardBatchUpdateAttribute(params).then((res) => {
        if (res.success) {
          proxy.$message.success({
            message: "操作成功",
          });
          emits("callback", params);
          handleClose();
        }
      });
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
// 关闭弹窗前的回调
function handleClose() {
  shows.value = false;
  emits("reset");
}
onMounted(() => {
  getUnitList()
});
</script>

<style scoped lang="scss">
.dialog-asset-card-split {
  .flex-row {
    display: flex;
    flex-direction: row;
    width: 300px;
  }
}
</style>
